
<!DOCTYPE html>
<html>
<head>
<title>jQueryMobile App</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/jquery/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="../static/jquery/jquery.js"></script>
<script type="text/javascript" src="../static/jquery/jquery.mobile-1.1.0.js"></script>

<script>
$(document).ready(function() {
	$('#two').hide();
	$('#three').hide();
	
	$("#one").live("swipeleft", function() {
		$('#one').hide();
		$('#two').show();
	});

	$("#two").live("swipeleft", function() {
		$('#two').hide();
		$('#three').show();
	});
	$("#two").live("swiperight", function() {
		$('#two').hide();
		$('#one').show();
	});
	$("#three").live("swiperight", function() {
		$('#three').hide();
		$('#two').show();
	});
});
</script>

</head>
<body>

	<div data-role="page">
		<div data-role="header">
			<h1>One</h1>
		</div>
		<div data-role="content">
			<div id="one">
				<p>I'm page one of three.</p>
				<p>Swipe left to go to page two.</p>
			</div>
			<div id="two">
				<p>I'm page two of three.</p>
				<p>Swipe left to go to page three.</p>
				<p>Swipe right to go to page one.</p>
			</div>
			<div id="three">
				<p>I'm page three of three.</p>
				<p>Swipe right to go to page two.</p>
			</div>
		</div>
	</div>
</body>
</html>